import { FC, useEffect, useState } from 'react';
import Routes from '@/routes/index';
import { useLocation } from 'react-router-dom';
import { Layout } from 'antd';
import Header from '@/components/Header';
import SideBar from '@/components/SideBar';
import { getQueryString } from '@/utils/util';
import { useRecoilState } from 'recoil';
import { collapsedSelector } from '@/recoil/selectors/collapsedSelector';

import './index.scss';

interface StyleType {
  padding: string;
  background?: string;
}

// 适配其他平台样式的类名
const ykStyleClassNames = [
  'common-btn-yk',
  'common-table-yk',
  'common-select-yk',
  'common-input-yk',
  'common-date-picker-yk',
  'common-loading-yk',
  'common-modal-yk',
  'common-radio-yk',
];

const LayoutDefault: FC = () => {
  const { Content } = Layout;
  // const from_other: boolean = getQueryString('from_other') === 'true' || false; // 从第三方平台跳转过来
  const from_other = true
  const embed_in_yk: boolean = getQueryString('embed_in_yk') === 'true' || false; // 嵌入到其他平台中
  const [collapsed, setCollapsed] = useRecoilState(collapsedSelector);
  const [style, setStyle] = useState<StyleType>({ padding: '0 24px 24px' });
  const { pathname } = useLocation();
  const bodyClassList = document.body.classList; // body 标签的类名

  useEffect(() => {
    if (embed_in_yk) { // 嵌入到其他平台中
      setStyle({ padding: '0', background: '#f0f2f5' });
      bodyClassList.add(...ykStyleClassNames);
    } else { // 在当前平台正常展示
      if (from_other) {
        setStyle({ padding: '24px' });
      } else {
        setStyle({ padding: '84px 24px 24px 224px' });
        if (collapsed) {
          setStyle({ padding: '84px 24px 24px 104px' });
        }
      }
    }
    // html 文档加载完成后触发浏览器的 resize 事件，从而让图表正常渲染
    window.onload = () => {
      window.dispatchEvent(new Event('resize'));
    }
  }, [pathname, collapsed]);

  return (
    <Layout>
      {!from_other && <SideBar />}
      <Layout>
        {!from_other && <Header />}
        <Layout>
          <Content className='site-layout-background' style={style}>
            <Routes />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default LayoutDefault;
